{% extends "base.html" %}
{% load static %}
{% load analysis_filters %}

{% block title %}{{ profile.knowledge_point.name }} - 知识点详情 - ExamPulse{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'analysis/css/knowledge_point_detail.css' %}">
{% endblock %}

{% block content %}
<div class="container mt-4 mb-5">
    <!-- 页面头部 -->
    <div class="knowledge-header fade-in-up">
        <div class="row align-items-center">
            <div class="col-md-8">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{% url 'analysis:profile_dashboard' %}">知识点画像</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{% url 'analysis:subject_profile' profile.knowledge_point.subject.id %}">
                                {{ profile.knowledge_point.subject.name }}
                            </a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            {{ profile.knowledge_point.name }}
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-2">{{ profile.knowledge_point.name }}</h1>
                <p class="mb-0 opacity-75">
                    {{ profile.knowledge_point.description|default:"这个知识点还没有描述信息" }}
                </p>
            </div>
            <div class="col-md-4 text-md-end">
                <div class="btn-group">
                    <a href="{% url 'analysis:profile_dashboard' %}" class="btn btn-light btn-sm">
                        <i class="fas fa-arrow-left me-1"></i>返回仪表板
                    </a>
                    <button onclick="window.exportKnowledgeData()" class="btn btn-light btn-sm">
                        <i class="fas fa-download me-1"></i>导出数据
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 掌握度显示 -->
    <div class="mastery-display fade-in-up">
        <div class="mastery-circle" data-mastery="{{ profile.mastery_level }}">
            <svg width="120" height="120" viewBox="0 0 120 120">
                <!-- 背景圆 -->
                <circle cx="60" cy="60" r="54" fill="none" stroke="#e9ecef" stroke-width="12"/>
                <!-- 进度圆 -->
                <circle class="mastery-progress" cx="60" cy="60" r="54" fill="none" stroke-width="12"
                        stroke-linecap="round" transform="rotate(-90 60 60)"/>
            </svg>
            <span>{{ profile.mastery_level|multiply:100|floatformat:0 }}%</span>
        </div>
        <div class="mastery-info">
            <div class="mastery-level">
                {% if profile.mastery_level >= 0.8 %}优秀掌握
                {% elif profile.mastery_level >= 0.6 %}良好掌握
                {% elif profile.mastery_level >= 0.4 %}基础掌握
                {% else %}需要加强{% endif %}
            </div>
            <span class="mastery-label
                {% if profile.mastery_level >= 0.8 %}bg-excellent
                {% elif profile.mastery_level >= 0.6 %}bg-good
                {% elif profile.mastery_level >= 0.4 %}bg-average
                {% else %}bg-poor{% endif %} text-white">
                学习状态: {{ profile.get_learning_status_display }}
            </span>
        </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-grid fade-in-up">
        <div class="stat-card">
            <div class="stat-icon bg-primary">
                <i class="fas fa-chart-line"></i>
            </div>
            <div class="stat-value text-primary" id="practice-accuracy">
                {{ practice_stats.recent_accuracy|multiply:100|floatformat:1 }}%
            </div>
            <div class="stat-label">近期正确率</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon bg-success">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="stat-value text-success">{{ practice_stats.correct_practices }}</div>
            <div class="stat-label">正确练习</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon bg-info">
                <i class="fas fa-history"></i>
            </div>
            <div class="stat-value text-info">{{ practice_stats.total_practices }}</div>
            <div class="stat-label">总练习次数</div>
        </div>

        <div class="stat-card">
            <div class="stat-icon bg-warning">
                <i class="fas fa-rocket"></i>
            </div>
            <div class="stat-value text-warning">{{ marginal_gain|floatformat:2 }}</div>
            <div class="stat-label">边际收益</div>
        </div>
    </div>

    <div class="row">
        <!-- 左侧内容 -->
        <div class="col-lg-8">
            <!-- 边际收益分析 -->
            <div class="content-card fade-in-up">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-trending-up text-success"></i>边际收益分析
                    </h3>
                </div>
                <div class="marginal-gain">
                    <div class="gain-indicator">
                        <div class="gain-bar" data-gain="{{ marginal_gain }}"></div>
                    </div>
                    <div>
                        <div class="gain-value
                            {% if marginal_gain > 0.7 %}text-excellent
                            {% elif marginal_gain > 0.4 %}text-average
                            {% else %}text-poor{% endif %}">
                            {{ marginal_gain|floatformat:3 }}
                        </div>
                        <div class="gain-label">
                            {% if marginal_gain > 0.7 %}高效提升区 - 建议重点投入
                            {% elif marginal_gain > 0.4 %}稳定提升区 - 保持学习节奏
                            {% else %}低效区 - 建议调整学习方法{% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 练习记录 -->
            <div class="content-card fade-in-up">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-list-alt text-primary"></i>练习记录
                    </h3>
                    <div class="btn-group ms-auto">
                        <button class="btn btn-outline-secondary btn-sm practice-filter active" data-filter="all">全部</button>
                        <button class="btn btn-outline-secondary btn-sm practice-filter" data-filter="correct">正确</button>
                        <button class="btn btn-outline-secondary btn-sm practice-filter" data-filter="incorrect">错误</button>
                    </div>
                </div>

                {% if practices %}
                <div class="table-responsive">
                    <table class="practice-table">
                        <thead>
                            <tr>
                                <th>练习时间</th>
                                <th>关联考试</th>
                                <th>结果</th>
                                <th>得分</th>
                                <th>备注</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for practice in practices %}
                            <tr class="practice-row" data-result="{{ practice.result }}">
                                <td>{{ practice.practiced_at|date:"Y-m-d H:i" }}</td>
                                <td>
                                    {% if practice.exam_record %}
                                        {{ practice.exam_record.exam.name }}
                                    {% else %}
                                        独立练习
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="result-badge
                                        {% if practice.result == 'correct' %}bg-correct
                                        {% elif practice.result == 'incorrect' %}bg-incorrect
                                        {% else %}bg-partial{% endif %}">
                                        {{ practice.get_result_display }}
                                    </span>
                                </td>
                                <td>{{ practice.score|default:"-" }}</td>
                                <td>{{ practice.notes|default:"-"|truncatechars:20 }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-4">
                    <i class="fas fa-inbox fa-2x text-muted mb-3"></i>
                    <p class="text-muted mb-0">暂无练习记录</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- 右侧边栏 -->
        <div class="col-lg-4">
            <!-- 学习建议 -->
            <div class="content-card fade-in-up">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-lightbulb text-warning"></i>学习建议
                    </h3>
                </div>

                <div class="suggestion-item border-excellent">
                    <div class="suggestion-icon bg-excellent text-white">
                        <i class="fas fa-bullseye"></i>
                    </div>
                    <div class="suggestion-content">
                        <div class="suggestion-title">掌握目标</div>
                        <p class="suggestion-desc">
                            {% if profile.mastery_level >= 0.8 %}
                                恭喜！您已经优秀掌握了这个知识点。建议您：
                                1. 尝试更高难度的应用题目
                                2. 帮助其他同学理解这个概念
                                3. 探索相关的高级知识点
                            {% elif profile.mastery_level >= 0.6 %}
                                您对这个知识点的掌握程度良好。建议您：
                                1. 重点练习易错题型
                                2. 总结解题方法和技巧
                                3. 定期复习巩固记忆
                            {% elif profile.mastery_level >= 0.4 %}
                                您已经掌握了基础知识。建议您：
                                1. 系统学习相关概念
                                2. 多做基础练习题
                                3. 建立知识框架
                            {% else %}
                                这个知识点还需要加强学习。建议您：
                                1. 从最基础的概念开始
                                2. 寻求老师或同学的帮助
                                3. 制定详细的学习计划
                            {% endif %}
                        </p>
                    </div>
                </div>

                <div class="suggestion-item border-good">
                    <div class="suggestion-icon bg-good text-white">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="suggestion-content">
                        <div class="suggestion-title">复习计划</div>
                        <p class="suggestion-desc">
                            {% if profile.next_review_date %}
                                根据艾宾浩斯遗忘曲线，您的下次复习时间是：<strong>{{ profile.next_review_date }}</strong>。
                                建议在复习前：
                                1. 回顾之前的错题
                                2. 快速过一遍核心概念
                                3. 做几道检测题目
                            {% else %}
                                尚未设置复习计划。建议您：
                                1. 立即设置首次复习时间
                                2. 按照遗忘曲线安排后续复习
                                3. 坚持执行复习计划
                            {% endif %}
                        </p>
                    </div>
                </div>

                <div class="suggestion-item border-average">
                    <div class="suggestion-icon bg-average text-white">
                        <i class="fas fa-chart-bar"></i>
                    </div>
                    <div class="suggestion-content">
                        <div class="suggestion-title">练习策略</div>
                        <p class="suggestion-desc">
                            基于您的练习数据，建议：
                            {% if practice_stats.recent_accuracy >= 80 %}
                                正确率很高，可以挑战更高难度的题目，拓展知识应用范围。
                            {% elif practice_stats.recent_accuracy >= 60 %}
                                正确率良好，建议针对性练习薄弱环节，提升稳定性。
                            {% else %}
                                正确率有待提高，建议回归基础，理解核心概念。
                            {% endif %}
                        </p>
                    </div>
                </div>
            </div>

            <!-- 关联知识点 -->
            <div class="content-card fade-in-up">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-project-diagram text-info"></i>关联知识点
                    </h3>
                </div>

                {% if related_knowledge %}
                <div class="related-knowledge">
                    {% for relation in related_knowledge %}
                    <div class="related-item border-{{ relation.target_knowledge.mastery_level|get_mastery_level }}"
                         data-knowledge-id="{{ relation.target_knowledge.id }}">
                        <div class="related-name">{{ relation.target_knowledge.name }}</div>
                        <div class="related-meta">
                            <span>{{ relation.get_relation_type_display }}</span>
                            <span>{{ relation.target_knowledge.mastery_level|multiply:100|floatformat:0 }}%</span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-3">
                    <i class="fas fa-unlink fa-2x text-muted mb-2"></i>
                    <p class="text-muted small mb-0">暂无关联知识点</p>
                </div>
                {% endif %}
            </div>

            <!-- 知识点信息 -->
            <div class="content-card fade-in-up">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-info-circle text-secondary"></i>知识点信息
                    </h3>
                </div>
                <div class="row">
                    <div class="col-6 mb-2">
                        <small class="text-muted">所属科目</small>
                        <div class="fw-medium">{{ profile.knowledge_point.subject.name }}</div>
                    </div>
                    <div class="col-6 mb-2">
                        <small class="text-muted">难度等级</small>
                        <div class="fw-medium">{{ profile.knowledge_point.difficulty_level|default:"未设置" }}</div>
                    </div>
                    <div class="col-6 mb-2">
                        <small class="text-muted">创建时间</small>
                        <div class="fw-medium">{{ profile.created_at|date:"Y-m-d" }}</div>
                    </div>
                    <div class="col-6 mb-2">
                        <small class="text-muted">最后更新</small>
                        <div class="fw-medium">{{ profile.updated_at|date:"Y-m-d" }}</div>
                    </div>
                    <div class="col-12 mb-2">
                        <small class="text-muted">知识点ID</small>
                        <div class="fw-medium">{{ profile.knowledge_point.id }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'analysis/js/knowledge_point_detail.js' %}"></script>
{% endblock %}